﻿<common:LayoutAwarePage x:Class="InfoHub.AppHub_Sports"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:UI="using:Microsoft.Advertising.WinRT.UI"
                        xmlns:common="using:InfoHub.Common"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:helpers="using:InfoHub.Helpers"
                        xmlns:local="using:InfoHub"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        x:Name="pageRoot"
                        mc:Ignorable="d">

    <common:LayoutAwarePage.DataContext>
        <local:AppHubViewModel />
    </common:LayoutAwarePage.DataContext>

    <common:LayoutAwarePage.Resources>

        <helpers:SnapConverter x:Key="SnapConverter" />

        <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />

        <CollectionViewSource x:Name="cvs"
                              IsSourceGrouped="True"
                              ItemsPath="Articles"
                              Source="{Binding Feeds}"
                              d:Source="{Binding Feeds, Source={d:DesignInstance IsDesignTimeCreatable=True, Type=local:AppHubViewModel}}" />
        <CollectionViewSource x:Name="cvsSnap"
                              IsSourceGrouped="True"
                              ItemsPath="Feeds.Articles"
                              Source="{Binding Feeds}"
                              d:Source="{Binding Feeds, Source={d:DesignInstance IsDesignTimeCreatable=True, Type=local:AppHubViewModel}}" />

        <DataTemplate x:Name="AdvertTemplateNormal">
            <Grid Background="Black">
                <Image Source="ms-appx:///Assets/AltAdvert.jpg" Stretch="UniformToFill" />
                <UI:AdControl Width="248" Height="248" />
            </Grid>
        </DataTemplate>

    </common:LayoutAwarePage.Resources>

    <!--<common:LayoutAwarePage.BottomAppBar>
        <AppBar IsOpen="True" x:Name="MyBottomAppBar" IsEnabled="False" >
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal" />
                <StackPanel Grid.Column="1"
                            HorizontalAlignment="Right"
                            Orientation="Horizontal">
                    <Button x:Name="MyPurchaseButton"
                            AutomationProperties.Name="Upgrade"
                            Command="{Binding PurchaseHideAdsCommand,
                                              Mode=OneWay}"
                            Content="" Visibility="Collapsed"
                            Style="{StaticResource AppBarButtonStyle}" />
                    <Button Command="{Binding ReloadAllCommand, Mode=OneWay}" Style="{StaticResource RefreshAppBarButtonStyle}" />
                </StackPanel>
            </Grid>
        </AppBar>
    </common:LayoutAwarePage.BottomAppBar>-->

    <Grid x:Name="RootLayout" Margin="0,0,0,0">


        <!--  this is what is shown during snap view  -->
        <Grid x:Name="SnapView"
              Visibility="Collapsed">
            <helpers:SnapListView Width="320"
                                  Margin="6,0,-0,0"
                                  HorizontalAlignment="Right"
                                  VerticalAlignment="Top"
                                  IsItemClickEnabled="True"
                                  IsSynchronizedWithCurrentItem="False"
                                  ItemClick="ListView_ItemClick_1"
                                  ItemTemplate="{StaticResource SnapTemplate}"
                                  ItemsSource="{Binding Source={StaticResource cvs}}"
                                  ScrollViewer.VerticalScrollBarVisibility="Visible">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <StackPanel />
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" Visibility="{Binding Converter={StaticResource SnapConverter}}">
                                    <Button MinHeight="40"
                                            Margin="2,0,0,0"
                                            Command="{Binding DataContext.LoadFeedCommand,
                                                              ElementName=pageRoot,
                                                              Mode=OneWay}"
                                            CommandParameter="{Binding Feed.MoreUrl}"
                                            Content="{Binding Feed.Title}"
                                            FontSize="35"
                                            Foreground="{StaticResource PrimaryContrastBrush}"
                                            Style="{StaticResource TextButtonStyle}" />
                                    <ProgressRing Width="50"
                                                  Height="50"
                                                  Margin="20,0,0,0"
                                                  IsActive="True"
                                                  Visibility="{Binding Feed.Busy,
                                                                       Converter={StaticResource BooleanToVisibilityConverter}}" />
                                </StackPanel>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                    </GroupStyle>
                </ListView.GroupStyle>
            </helpers:SnapListView>
        </Grid>

        <!--  this is what is shown during normal view  -->
        <Grid x:Name="FillView"
              Visibility="Visible">
            <Grid.Background>
                <SolidColorBrush Color="{StaticResource SecondaryColor}" />
            </Grid.Background>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="140" />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="120" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Grid.RowSpan="2">
                    <Grid.Background>
                        <ImageBrush ImageSource="Assets/Background.jpg" Stretch="UniformToFill" AlignmentX="Left" />
                    </Grid.Background>
                </Grid>
                <SemanticZoom Grid.Column="0"
                          Grid.ColumnSpan="2"
                          Grid.Row="0" Padding="0"
                          Grid.RowSpan="2">
                    <SemanticZoom.ZoomedInView>

                        <!--  this is what is whoen while zoomed in  -->
                        <helpers:GridView x:Name="HubGridView" 
                          Padding="0"
                          FontFamily="Global User Interface"
                          IsItemClickEnabled="True"
                          IsSynchronizedWithCurrentItem="False"
                          ItemClick="HubGridView_ItemClick_1"
                          ItemsSource="{Binding Source={StaticResource cvs}}"
                          SelectedItem="{Binding SelectedArticle,
                                                 Mode=TwoWay}"
                          SelectionMode="Single" HorizontalAlignment="Stretch" Margin="0,0,0,0">
                            <helpers:GridView.Background>
                                <SolidColorBrush Color="{StaticResource SecondaryColor}" Opacity=".75" />
                            </helpers:GridView.Background>
                            <GridView.Header>
                                <StackPanel Orientation="Horizontal">
                                    <Grid Width="600" Height="{Binding ActualHeight, ElementName=RootLayout}">
                                        <Grid.Background>
                                            <ImageBrush ImageSource="Assets/Background.jpg" Stretch="UniformToFill" AlignmentX="Left" />
                                        </Grid.Background>
                                        <Grid>
                                            <Grid.Background>
                                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                                    <GradientStop Color="Black" />
                                                    <GradientStop Offset="0.35" Color="#00B2B2B2" />
                                                </LinearGradientBrush>
                                            </Grid.Background>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="140" />
                                                <RowDefinition />
                                            </Grid.RowDefinitions>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="120" />
                                                <ColumnDefinition />
                                            </Grid.ColumnDefinitions>
                                            <Grid Grid.Row="1"
                                  Grid.Column="0"
                                  Grid.ColumnSpan="2"
                                  Margin="0,0,0,0"
                                  VerticalAlignment="Bottom">
                                                <Grid.Background>
                                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                                        <GradientStop Offset=".1" />
                                                        <GradientStop Offset="1" Color="Black" />
                                                    </LinearGradientBrush>
                                                </Grid.Background>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="120" />
                                                    <ColumnDefinition />
                                                </Grid.ColumnDefinitions>
                                                <StackPanel Grid.Column="1" Margin="0,160,20,40">
                                                    <ContentPresenter Content="{Binding DataContext.HighlightedArticle, ElementName=RootLayout}">
                                                        <ContentPresenter.ContentTemplate>
                                                            <DataTemplate>
                                                                <StackPanel Tapped="StackPanel_Tapped_1">
                                                                    <TextBlock Style="{StaticResource SubheaderTextStyle}" Text="{Binding Title, Mode=OneWay}" />
                                                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                                               Text="{Binding Body,
                                                                              Mode=OneWay}"
                                                               TextTrimming="WordEllipsis"
                                                               TextWrapping="NoWrap" />
                                                                </StackPanel>
                                                            </DataTemplate>
                                                        </ContentPresenter.ContentTemplate>
                                                    </ContentPresenter>
                                                </StackPanel>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                    <Grid>
                                        <Grid Height="200" VerticalAlignment="Top">
                                            <Image Source="{Binding SummaryData.Image}" Width="200" VerticalAlignment="Bottom" Opacity=".25" />
                                        </Grid>
                                        <ItemsControl Margin="40,200,0,0" ItemsSource="{Binding SummaryData.Facts}">
                                            <ItemsControl.ItemTemplate>
                                                <DataTemplate>
                                                    <TextBlock MaxWidth="250"
                                           Margin="0,0,0,20"
                                           Style="{StaticResource SubtitleTextStyle}"
                                           TextWrapping="Wrap">
                                                        <TextBlock.Foreground>
                                                            <SolidColorBrush Color="{StaticResource SecondaryContrastColor}" />
                                                        </TextBlock.Foreground>
                                    <Run FontSize="20"
                                         FontWeight="ExtraBold"
                                         Text="{Binding [0],
                                                        Mode=OneWay}" />
                                    <LineBreak />
                                    <Run FontSize="15" Text="{Binding [1], Mode=OneWay}" />
                                                    </TextBlock>
                                                </DataTemplate>
                                            </ItemsControl.ItemTemplate>
                                        </ItemsControl>
                                    </Grid>
                                </StackPanel>
                            </GridView.Header>
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Margin="80,140,0,0"
                                VerticalAlignment="Top"
                                Orientation="Horizontal">
                                        <StackPanel.ChildrenTransitions>
                                            <TransitionCollection>
                                                <EntranceThemeTransition />
                                            </TransitionCollection>
                                        </StackPanel.ChildrenTransitions>
                                    </StackPanel>
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
                            <GridView.ItemTemplateSelector>
                                <helpers:TemplateSelector AdvertTemplateHero="{StaticResource AdvertTemplateNormal}"
                                          AdvertTemplateNormal="{StaticResource AdvertTemplateNormal}"
                                          CalendarTemplateHero="{StaticResource CalendarTemplateNormal}"
                                          CalendarTemplateNormal="{StaticResource CalendarTemplateNormal}"
                                          FlickrTemplateHero="{StaticResource FlickrTemplateHero}"
                                          FlickrTemplateNormal="{StaticResource FlickrTemplateNormal}"
                                          NewsTemplateHero="{StaticResource NewsTemplateHero}"
                                          NewsTemplateNormal="{StaticResource NewsTemplateNormal}"
                                          SummaryTemplateHero="{StaticResource SummaryTemplateHero}"
                                          SummaryTemplateNormal="{StaticResource SummaryTemplateHero}"
                                          TwitterTemplateHero="{StaticResource TwitterTemplateNormal}"
                                          TwitterTemplateNormal="{StaticResource TwitterTemplateNormal}"
                                          WeatherTemplateHero="{StaticResource WeatherTemplateNormal}"
                                          WeatherTemplateNormal="{StaticResource WeatherTemplateNormal}"
                                          YouTubeTemplateHero="{StaticResource YouTubeTemplateHero}"
                                          YouTubeTemplateNormal="{StaticResource YouTubeTemplateNormal}" />
                            </GridView.ItemTemplateSelector>
                            <GridView.GroupStyle>
                                <GroupStyle>
                                    <GroupStyle.HeaderTemplate>
                                        <DataTemplate>
                                            <StackPanel Orientation="Horizontal">
                                                <Button MinHeight="40"
                                        Margin="3,0,0,0"
                                        Command="{Binding DataContext.LoadFeedCommand,
                                                          ElementName=pageRoot,
                                                          Mode=OneWay}"
                                        CommandParameter="{Binding Feed.MoreUrl}"
                                        FontSize="20"
                                        Foreground="{StaticResource GroupHeaderBrush}"
                                        Style="{StaticResource TextButtonStyle}">
                                                    <Button.Content>
                                                        <TextBlock>
                                            <Run Text="{Binding Feed.Title}">
                                            </Run>
                                            <Run Text="&gt;">
                                            </Run>
                                                        </TextBlock>
                                                    </Button.Content>
                                                </Button>
                                                <ProgressRing Width="30"
                                              Height="30"
                                              Margin="20,0,0,0"
                                              Foreground="{StaticResource GroupHeaderBrush}"
                                              IsActive="True"
                                              Visibility="{Binding Feed.Busy,
                                                                   Converter={StaticResource BooleanToVisibilityConverter}}" />
                                            </StackPanel>
                                        </DataTemplate>
                                    </GroupStyle.HeaderTemplate>
                                    <GroupStyle.Panel>
                                        <ItemsPanelTemplate>
                                            <VariableSizedWrapGrid MinWidth="300" MaxHeight="500"
                                                   Margin="0,0,80,50"
                                                   ItemHeight="1"
                                                   ItemWidth="1"
                                                   Orientation="Vertical">
                                                <VariableSizedWrapGrid.ChildrenTransitions>
                                                    <TransitionCollection>
                                                        <EntranceThemeTransition />
                                                    </TransitionCollection>
                                                </VariableSizedWrapGrid.ChildrenTransitions>
                                            </VariableSizedWrapGrid>
                                        </ItemsPanelTemplate>
                                    </GroupStyle.Panel>
                                </GroupStyle>
                            </GridView.GroupStyle>
                        </helpers:GridView>

                    </SemanticZoom.ZoomedInView>
                    <SemanticZoom.ZoomedOutView>

                        <!--  this is what is whoen while zoomed out (high level)  -->
                        <GridView x:Name="GridViewOut"
                              Grid.Row="1"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              ItemsSource="{Binding Feeds}"
                              SelectionMode="None">
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <WrapGrid MaximumRowsOrColumns="4" Orientation="Vertical" />
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
                            <GridView.ItemTemplate>
                                <DataTemplate>
                                    <Grid Width="400" Background="{StaticResource SecondaryBrush}">
                                        <ProgressRing Width="50"
                                                  Height="50"
                                                  Margin="0,0,20,0"
                                                  HorizontalAlignment="Right"
                                                  Foreground="{StaticResource SecondaryContrastBrush}"
                                                  IsActive="True"
                                                  Visibility="{Binding Group.Feed.Busy,
                                                                       Converter={StaticResource BooleanToVisibilityConverter}}" />
                                        <!--  this is required to see the text at designtime  -->
                                        <TextBlock Margin="10"
                                               FontSize="40"
                                               Text="{Binding Header}" />
                                        <!--  this is required to see the text at runtime  -->
                                        <TextBlock Margin="10"
                                               FontSize="40"
                                               Foreground="{StaticResource SecondaryContrastBrush}"
                                               Text="{Binding Group.Header}" />
                                    </Grid>
                                </DataTemplate>
                            </GridView.ItemTemplate>
                        </GridView>

                    </SemanticZoom.ZoomedOutView>
                </SemanticZoom>

                <StackPanel Margin="120,58,0,0" Grid.ColumnSpan="2"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        Orientation="Horizontal">
                    <TextBlock FontSize="42"
                           Foreground="{StaticResource TitleBrush}"
                           Style="{StaticResource PageHeaderTextStyle}"
                           Text="{Binding Title}">
                    </TextBlock>
                    <TextBlock Margin="-20,0,30,40"
                           FontSize="20"
                           Foreground="{StaticResource TitleBrush}"
                           Style="{StaticResource PageHeaderTextStyle}"
                           Text="{Binding SubTitle}">
                    </TextBlock>
                </StackPanel>

                <!--<TextBlock Grid.Column="1" Foreground="{StaticResource TitleBrush}" FontSize="42"
                        Style="{StaticResource PageHeaderTextStyle}" Text="{Binding Title, Mode=OneWay}">
                </TextBlock>-->

                <common:Browser x:Name="MyBrowser"
                            Grid.RowSpan="2"
                            Grid.ColumnSpan="2" />

            </Grid>

            <VisualStateManager.VisualStateGroups>

                <!--  Visual states reflect the application's view state  -->
                <VisualStateGroup x:Name="ApplicationViewStates">
                    <VisualState x:Name="FullScreenLandscape" />
                    <VisualState x:Name="Filled" />

                    <VisualState x:Name="FullScreenPortrait">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnapView" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FillView" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>

                    <VisualState x:Name="Snapped">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnapView" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FillView" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

        </Grid>
    </Grid>
</common:LayoutAwarePage>